<script setup lang='ts'>
import { useIndexStore } from '@/stores/index'
import { getCameraListApi } from '@/apis/user'
import { reactive } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const indexStore = useIndexStore()
const ispc = indexStore.ispc

// 全部摄像机列表
const allCameraList = reactive([
    {
        itemid: 'c01',
        title: 'Trim Cover Development Zone Camera',
        cimg: new URL('@/assets/img/l1.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c02',
        title: 'Function Test Zone Camera',
        cimg: new URL('@/assets/img/l2.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c03',
        title: 'Foaming Trial Production Workshop Camera',
        cimg: new URL('@/assets/img/l3.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c04',
        title: 'Panoramic Left Camera',
        cimg: new URL('@/assets/img/l4.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c05',
        title: 'Components Machining Zone Camera',
        cimg: new URL('@/assets/img/l5.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c06',
        title: 'Smart Manufacturing Zone Left Camera',
        cimg: new URL('@/assets/img/l6.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c07',
        title: 'Comprehensive Area Camera',
        cimg: new URL('@/assets/img/l7.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c08',
        title: 'Smart Manufacturing Zone Right Camera',
        cimg: new URL('@/assets/img/l6.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c09',
        title: 'Shared Discussion Area Camera',
        cimg: new URL('@/assets/img/l9.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c10',
        title: 'Panoramic Right Camera',
        cimg: new URL('@/assets/img/l4.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }
])

let cameraList = reactive([])
// 获取token
const token = localStorage.getItem('token')
// 查询当前用户数据权限列表
const getCameraList = async () => {
    const res = await getCameraListApi({ token })
    // console.log(res)
    if (res.data.code === 200) {
        cameraList = res.data.data.streams
        cameraList.forEach(item => {
            allCameraList.forEach(item2 => {
                if (item2.itemid === item.tag) {
                    item2.cameraUrl = item.player_m3u8_url
                    item2.isactive = true
                }
            })
        })
        // console.table(allCameraList);
    } else {
        showToast(res.data.msg)
    }
}

getCameraList()

// 
const toCameraInfo = (id, isactive) => {
    if (!isactive) {
        return showToast('Under planning')
    }
    router.replace({ path: '/en/live', query: { id } })
}
</script>

<template>
    <div class="map_local box bg3 clmcenter">
        <img src="@/assets/img/logo.png" class="logo" alt="logo">
        <img src="@/assets/img/back.png" class="btn_goback" @click="$router.replace('/en/main')">
        <div class="container clmstart">
            <div class="stitle stitle_en">
                <img src="@/assets/img/title_left.png" class="title_left anileft" />
                <p>Site Visit Regional Distribution Map</p>
                <img src="@/assets/img/title_right.png" class="title_right aniright" />
            </div>
            <div class="mapbox" :style="{ marginTop: ispc ? '' : '6vw', marginLeft: ispc ? '' : '2vw' }">

                <div :class="['cameraitem', 'citem' + (index + 1)]" v-for="(item, index) in allCameraList"
                    :key="item.itemid" :style="index == 3 ? { left: ispc ? '' : '-3.5vw' } : ''">
                    <img :src="item.cimg" class="cimg" v-if="index >= 4">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        :style="{ '-webkit-filter': item.isactive ? '' : 'grayscale(100%)', filter: item.isactive ? '' : 'grayscale(100%)' }"
                        @click="toCameraInfo(item.itemid, item.isactive)">
                        <p class="ctitle">{{ item.title }}</p>
                    </div>
                    <img :src="item.cimg" class="cimg" v-if="(index < 4 && ispc) || (index < 3 && !ispc)">
                    <img src="@/assets/img/l14.png" class="cimg" :style="{ width: '2.5vw' }" v-if="index == 3 && !ispc">
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.map_local {
    overflow: hidden;
    .container {
        position: relative;
        width: 100%;
        .mapbox {
            position: relative;
            width: 82.45vw;
            height: 20.83vw;
            margin-top: 10vw;
            margin-bottom: 5.83vw;
            background: url('@/assets/img/map.png') no-repeat;
            background-size: 100% 100%;
            .cameraitem {
                position: absolute;
                .ctitlebox {
                    width: 100%;
                    cursor: pointer;
                    .ctitle {
                        font-size: 0.868vw;
                        color: #ffffff;
                        text-align: center;
                        line-height: 2.55vw;
                        // text-transform: uppercase;
                    }
                }
                .cimg {
                    position: relative;
                    z-index: 2;
                }
            }
            .citem1,
            .citem3,
            .citem5,
            .citem6,
            .citem8 {
                width: 19.7vw;
                .ctitlebox {
                    height: 2.55vw;
                    background: url('@/assets/img/en/b5.png') no-repeat;
                    background-size: 100% 100%;
                }
                .cimg {
                    width: 0.73vw;
                }
            }
            .citem1,
            .citem2,
            .citem3 {
                top: -4.583vw;
                .cimg {
                    margin-top: -0.6vw;
                }
            }
            .citem2,
            .citem3 {
                .cimg {
                    margin-left: 3.33vw;
                }
            }
            .citem1 {
                left: 1.67vw;
                .cimg {
                    margin-left: 17.34vw;
                }
            }
            .citem2, .citem9 {
                .ctitlebox {
                    width: 16vw;
                    height: 2.4vw;
                    background: url('@/assets/img/en/b9.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
            .citem2 {
                left: 33.4vw;
                .cimg {
                    margin-left: 2.03vw;
                }
            }
            .citem3 {
                left: 58vw;
                .cimg {
                    margin-left: 3.6vw;
                }
            }
            .citem4,
            .citem10 {
                display: flex;
                margin-top: 7.5vw;
                .ctitlebox {
                    width: 3.18vw;
                    height: 12.9vw;
                    .ctitle {
                        display: flex;
                        align-items: center;
                        width: 80%;
                        height: 100%;
                        line-height: 1.1;
                        text-align: center;
                        word-break: break-all;
                        writing-mode: vertical-lr;
                    }
                }
                .cimg {
                    width: 3.85vw;
                    height: 0.73vw;
                    margin-top: 9.2vw;
                }
            }
            .citem4 {
                left: -5.16vw;
                .ctitlebox {
                    background: url('@/assets/img/en/b6.png') no-repeat;
                    background-size: 100% 100%;
                    .ctitle {
                        margin-left: 5%;
                        padding-top: 1.9vw;
                    }
                }
                .cimg {
                    margin-left: -0.9vw;
                }
            }
            .citem10 {
                right: -5.35vw;
                .ctitlebox {
                    margin-left: -0.9vw;
                    background: url('@/assets/img/en/b4.png') no-repeat;
                    background-size: 100% 100%;
                    .ctitle {
                        margin-left: 12%;
                        padding-top: 1.6vw;
                    }
                }
            }
            .citem5,
            .citem6,
            .citem7,
            .citem8, .citem9 {
                .ctitlebox {
                    margin-top: -0.65vw;
                }
            }
            .citem5 {
                left: -5.16vw;
                top: 14.6vw;
                .cimg {
                    margin-left: 11.56vw;
                }
            }
            .citem6,
            .citem8 {
                top: 18.18vw;
                .ctitlebox {
                    margin-top: -0.75vw;
                    height: 2.55vw;
                }
                .cimg {
                    width: 5.83vw;
                }
            }
            .citem6 {
                left: 15.78vw;
                .cimg {
                    margin-left: 17.2vw;
                }
            }
            .citem7 {
                left: 36.1vw;
                top: 19.43vw;
                .ctitlebox {
                    width: 14.17vw;
                    height: 2.5vw;
                    background: url('@/assets/img/en/b8.png') no-repeat;
                    background-size: 100% 100%;
                }
                .cimg {
                    margin-left: 3.5vw;
                    width: 0.73vw;
                }
            }
            .citem8 {
                left: 51.04vw;
                .cimg {
                    margin-left: 16.4vw;
                }
            }
            .citem9 {
                left: 73.18vw;
                top: 17.03vw;
                .cimg {
                    margin-left: 2.34vw;
                    width: 0.73vw;
                }
            }
        }
    }
}
</style>